<template>
  <div class="post-form-container">
    <el-card class="form-card">
      <div slot="header">
        <span>{{ isEdit ? '编辑帖子' : '发布帖子' }}</span>
      </div>
      <el-form ref="postForm" :model="postForm" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="postForm.title" placeholder="请输入帖子标题"></el-input>
        </el-form-item>

        <el-form-item label="分类" prop="category">
          <el-select v-model="postForm.category" placeholder="请选择分类">
            <el-option label="养宠经验" value="EXPERIENCE"></el-option>
            <el-option label="宠物健康" value="HEALTH"></el-option>
            <el-option label="宠物趣事" value="FUNNY"></el-option>
            <el-option label="其他" value="OTHER"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input
            type="textarea"
            v-model="postForm.content"
            :rows="10"
            placeholder="请输入帖子内容"
            resize="none">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleSubmit">{{ isEdit ? '保存修改' : '立即发布' }}</el-button>
          <el-button @click="$router.push('/main/forum')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { createPost, updatePost, getPostDetail } from '@/api/post'

export default {
  name: 'PostForm',
  data() {
    return {
      isEdit: false,
      postForm: {
        title: '',
        category: '',
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入帖子标题', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择帖子分类', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入帖子内容', trigger: 'blur' },
          { min: 10, message: '内容不能少于10个字符', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    // 获取帖子详情
    fetchPostDetail(id) {
      getPostDetail(id).then(response => {
        if (response.code === 200 && response.data) {
          const { data } = response
          this.postForm = {
            title: data.title,
            category: data.category,
            content: data.content
          }
        } else {
          this.$message.error('获取帖子详情失败：' + (response.message || '未知错误'))
        }
      }).catch(error => {
        console.error('获取帖子详情失败:', error)
        this.$message.error('获取帖子详情失败：' + (error.message || '未知错误'))
      })
    },
    // 提交表单
    handleSubmit() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          const request = this.isEdit
            ? updatePost(this.$route.params.id, this.postForm)
            : createPost(this.postForm)
          
          request
            .then(response => {
              if (response.code === 200) {
                this.$message.success(this.isEdit ? '修改成功' : '发布成功')
                this.$router.push('/main/forum')
              } else {
                this.$message.error(response.message || '操作失败')
              }
            })
            .catch(error => {
              console.error('提交表单错误:', error)
              this.$message.error(error.message || '操作失败')
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    }
  },
  created() {
    // 判断是否是编辑模式
    this.isEdit = this.$route.name === 'PostEdit'
    if (this.isEdit) {
      this.fetchPostDetail(this.$route.params.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.post-form-container {
  padding: 20px;

  .form-card {
    max-width: 800px;
    margin: 0 auto;
  }

  .el-button {
    margin-right: 20px;
  }
}
</style> 